import { useState } from 'react'

export const day01_11 = function () {
    const [count, setCount] = useState(1)
    const handleClick = () => {
        setCount(count + 1)
    }
    const getMsg = (msg: string) => {
        console.log('msg', msg)
    }

    const [count1, setCount1] = useState(0)
    return (
        <>
            <h3>component Father</h3>
            <button onClick={handleClick}> ChangeName </button>
            <h3>Son</h3>
            <Son
                count={count}
                name={'Jack'}
                age={18}
                isTrue={false}
                list={[1, 2, 3]}
                obj={{ name: 'jack' }}
                cb={() => console.log('callBack')}
                child={<div>this is props.child</div>}
                onGetMsg={getMsg}
            />
            <h3>Son1</h3>
            <Son1>
                <span>123</span>
            </Son1>

            <SonTest count1={count1} onSetCount1={setCount1} />
        </>
    )
}

const Son = function (props: any) {
    console.log('props', props)
    // props是只读的
    // props.name = '123'
    return (
        <>
            <h3>component Son</h3>
            <div>{props.count}</div>
            <div>{props.name}</div>
            <div>{props.age}</div>
            <div>{props.isTrue}</div>
            {props.child}
            <button onClick={() => props.onGetMsg('123')}>Send</button>
        </>
    )
}

const Son1 = function (props: any) {
    console.log(props)
    // Son1标签内的内容成为 props.children的内容
    return <></>
}

const SonTest = function (props: any) {
    return (
        <>
            <h3>Son Test</h3>
            <div>{props.count1}</div>
            <div>
                <button onClick={() => props.onSetCount1(props.count1 + 1)}>Count ++</button>
            </div>
        </>
    )
}
